<template>
  <div class="shopcart">
    <nav-bar class="shopcart-nav">
      <div slot="center">购物车({{cartLength}})</div>
    </nav-bar>
    <scroll class="content">
    <cart-list></cart-list>
    </scroll>
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>


<script>
// 公共组件
import NavBar from "@/components/common/navbar/NavBar";
// 子组件
import CartList from "@/views/shopcart/ChildComps/CartList";
import CartBottomBar from "@/views/shopcart/ChildComps/CartBottomBar";
// 引入公共组件
import Scroll from "@/components/common/scroll/Scroll";
import {mapGetters} from 'vuex'

export default {
  name: "Search",
  components:{
    NavBar,
    CartList,
    CartBottomBar,
    Scroll
  },
  computed:{
    ...mapGetters(['cartLength'])
  }
}
</script>

<style scoped>
.shopcart{

}
.shopcart .shopcart-nav{
  color: #fff;
  background-color: #FF8198;
  z-index: 9;
}
/*滚动组件的样式*/
.content {
  overflow: hidden;
  height: calc(100vh - 137px);
}
</style>